<template>
	<view class="container">
		<!-- 展示当前选择的项目名称 -->
		<view class="project-name">项目: {{ service_project.service_name }}</view>

		<!-- 用户选择宠物下拉框 -->
		<view class="form-item">
			<view class="label">选择宠物:</view>
			<picker mode="selector" :range="petNameList" :value="selectedPetIndex" @change="onPetChange">
				<view class="picker" style="width: 40vw;">{{ petList[selectedPetIndex].pet_name }}</view>
			</picker>
		</view>

		<!-- 展示医生信息 -->
		<view class="form-item">
			<view class="label">医生:</view>
			<view class="doctor-name">{{ selectedDoctor.doctor_name }}</view>
		</view>

		<!-- 用户选择预约时间 -->
		<view class="form-item">
			<view class="label">预约日期:</view>
			<picker mode="date" :value="selectedDate" @change="onDateChange">
				<view class="picker" style="width: 40vw;">{{ selectedDate }}</view>
			</picker>
		</view>
		<!-- <view class="form-item">
      <view class="label">预约时间:</view>
      <picker mode="time" :value="selectedTime" @change="onTimeChange">
        <view class="picker">{{ selectedTime }}</view>
      </picker>
    </view> -->

		<!-- 确认预约按钮 -->
		<view class="button" @click="submitAppointment">确认预约</view>
	</view>
</template>

<script>
	import config from '@/config/config.js'; // 引入全局配置文件

	export default {
		data() {
			return {
				service_project: "", // 项目名称
				petList: [], // 宠物列表
				petNameList: [], // 宠物名称的列表
				selectedPetIndex: 0, // 用户选择的宠物索引
				selectedDoctor: {
					doctor_id: 12,
					doctor_name: "佚名"
				}, // 展示医生名字
				selectedDate: '', // 用户选择的日期
				//selectedTime: '', // 用户选择的时间
				dataLoading: true, // 数据加载状态
				service_detail_id:0
			};
		},
		onLoad(query) {
			const service_detail_id = query.service_detail_id
			const doctor_id = query.doctor_id
			const doctor_name = query.doctor_name
			console.log("*****************"+doctor_id+doctor_name+"*******************");
			setTimeout(() => {
				uni.request({
					url: config.baseURL + `/servicedetails/${service_detail_id}`,
					method: 'GET',
					success: (res) => {
						this.service_project = res.data.data
						this.service_detail_id = service_detail_id
						if(doctor_id!=null&&doctor_name!=null){
							this.selectedDoctor={
								doctor_id: doctor_id,
								doctor_name: doctor_name
							}
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败，请检查网络连接',
							icon: 'none'
						});
					},
					complete: () => {
						this.dataLoading = false; // 数据加载完成，隐藏加载提示
					}
				});
			}, 1000);
		},
		mounted() {
			this.getList();
		},
		methods: {
			async getList() {
				try {
					const res = uni.getStorageSync('userInfo');
					console.log(res, "用户数据");
					const user_id = res.user_id;

					await uni.request({
						url: config.baseURL + `/pets/getbyuserid/${user_id}`,
						method: 'GET',
						success: (res) => {
							console.log(res, "响应数据");
							this.petList = res.data.data
							this.petNameList = res.data.data.map(pet => pet.pet_name)
						}
					});

				} catch (err) {
					console.error('获取用户信息失败:', err);
				}
			},
			onPetChange(event) {
				// 用户选择宠物的回调函数
				this.selectedPetIndex = event.detail.value;
			},
			onDateChange(event) {
				// 用户选择日期的回调函数
				this.selectedDate = event.detail.value;
			},
			onTimeChange(event) {
				// 用户选择时间的回调函数
				this.selectedTime = event.detail.value;
			},
			submitAppointment() {
				if(this.selectedDate==''){
					uni.showToast({
						icon:'none',
						title:"请选择预约时间！"
					})
					return
				}
				// 提交预约信息的逻辑
				// 这里可以向后端发送预约请求，处理预约逻辑
				// 包括所选宠物、医生、日期、时间等信息
				let appointment = {
					user_pkid: uni.getStorageSync('userInfo').user_id,
					pet_id: this.petList[this.selectedPetIndex].pet_id,
					project_id: this.service_project.service_detail_id,
					doctor_pkid: this.selectedDoctor.doctor_id,
					appointment_time: this.selectedDate,
					is_medical:this.service_detail_id==10?1:0
				}
				uni.request({
					url: config.baseURL + '/appointment/add',
					method: 'POST',
				 data: appointment,
					success: (res) => {
				 	if (res.data.status == true) {
							//存储用户信息，备用
							//登录成功弹窗	
							uni.showToast({
								title: '预约成功',
								icon: 'success',
								duration: 2000,
								success: () => {
									uni.reLaunch({
										url: "/pages/index/index"
									})
								}
							});
						} else {
							console.error('预约失败', res.data.message);
						}
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});
				uni.reLaunch({
					url: "/pages/index/index"
				})
				console.log('提交预约信息');
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.project-name {
		margin-bottom: 20px;
		font-size: 16px;
	}

	.form-item {
		margin-bottom: 20px;
		display: flex;
		align-items: center;
	}

	.label {
		width: 100px;
	}

	.picker {
		flex: 1;
		padding: 10px;
		background-color: #f0f0f0;
		border-radius: 5px;
		text-align: center;
	}

	.doctor-name {
		padding: 10px;
		background-color: #f0f0f0;
		border-radius: 5px;
	}

	.button {
		background-color: #1aad19;
		color: #fff;
		text-align: center;
		padding: 10px 20px;
		border-radius: 5px;
		cursor: pointer;
	}
</style>
